<template>
  <xt-dropdown :options="options" @command="handleCommand">
    <div class="flex flex-row items-center">
      <span class="text-primary mr-4 text-16">{{ name }}</span>
      <xt-avatar :src="src" :size="56" />
    </div>
  </xt-dropdown>

  <system-setting-drawer ref="setting" />
</template>

<script lang="ts">
export default {
  name: "HeaderAvatar",
};
</script>

<script lang="ts" setup>
import { getCurrentInstance, computed, ref } from "vue";
import userStore from "@/pinia/user";
import SystemSettingDrawer from "@/components/setting/setting.vue";
import { OptionType } from "@/typings";

interface CommandFnType {
  user: () => void;
  setting: () => void;
  logout: () => void;
}

// vue 实例
const curIns = getCurrentInstance()?.proxy;

// 用户 store
const store = userStore();

// 头像地址
const src = computed(() => store.userInfo.avatar);

const name = computed(() => store.userInfo.name);

// 下拉菜单数据
const options: OptionType[] = [
  {
    name: "用户信息",
    code: "user",
    icon: "icon-yonghu",
    i18n: "avatar.USER",
  },
  {
    name: "设 置",
    code: "setting",
    icon: "icon-shezhi",
    i18n: "avatar.SETTING",
  },
  {
    name: "退出登录",
    code: "logout",
    icon: "icon-guanbi",
    i18n: "avatar.LOGOUT",
    divided: true,
  },
];

// 用户信息
const commandUser = () => {
  console.log("user");
};

// 多语言处理
const setting = ref();
const commandSetting = () => {
  setting.value.open();
};

// 退出登录
const commandLogout = () => {
  curIns?.$router.push({
    path: "/logout",
  });
};

// 下拉菜单事件定义
const commandFn: CommandFnType = {
  user: commandUser,
  setting: commandSetting,
  logout: commandLogout,
};

// 下拉菜单事件
const handleCommand = (command: keyof CommandFnType) => {
  commandFn[command]();
};
</script>
